<!--
*@Author: QWP
*@Description: pType 1 考勤登记     pType 2 考勤登记审核   
*@Date: 2024-07-08 09:51:28
-->
<template>
  <a-layout class="f-h-100 s-bg-white" id="test">
    <u-search-header>
      <u-form
        :model="searchF"
        :gutter="16"
        :elements="searchEl"
        class="f-w-auto"
      >
        <a-col>
          <a-space>
            <u-icon-button>查询</u-icon-button>
            <u-icon-button itype="export">导出</u-icon-button>
          </a-space>
        </a-col>
        <a-col flex="1">
          <a-row justify="end">
            <a-space>
              <template v-if="route.params.pType == '1'">
                <u-icon-button itype="add" @click="showEdit = true">
                  新增
                </u-icon-button>
                <u-icon-button itype="edit" @click="showEdit = true">
                  修改
                </u-icon-button>
                <u-icon-button itype="delete" @click="">删除</u-icon-button>
              </template>
              <template v-else-if="route.params.pType == '2'">
                <u-icon-button itype="audit">审核</u-icon-button>
                <u-icon-button itype="recall">撤销审核</u-icon-button>
                <u-icon-button itype="close">退回</u-icon-button>
              </template>
            </a-space>
          </a-row>
        </a-col>
      </u-form>
    </u-search-header>
    <a-layout-content class="f-padding-rl24">
      <u-table
        :columns="columns"
        :data="tabData"
        v-model:pagination="pagenation"
      ></u-table>
    </a-layout-content>
  </a-layout>

  <!-- 编辑弹窗 -->
  <Edit
    v-model:open="showEdit"
    wrap-class-name="full-modal"
    :title="dialogTitle"
  />

  <!-- 导入 -->
  <u-imp-data v-model:open="showImp"></u-imp-data>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { _IFormEl } from '@/components/common/form/interface';
import { FormItemProps, TableColumnProps } from 'ant-design-vue';
import Edit from './Edit.vue';
const route = useRoute();
const router = useRouter();

onMounted(() => {});

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`,
});
const searchF = reactive({
  model: {
    fwzh: '',
    fwzh1: '',
  },
});
const formItemProps: FormItemProps = {
  labelWidth: '80px',
  wrapperCol: { span: 24 },
};
const searchEl: Array<_IFormEl> = [
  {
    label: '申请类型',
    key: 'sqlx',
    element: 'select',
    col: { span: 3 },
    formItemProps: formItemProps,
  },
  {
    label: '申请时间',
    key: 'rksj',
    element: 'datepicker',
    col: { span: 4 },
    formItemProps: formItemProps,
  },
  {
    label: '数据状态',
    key: 'sattus',
    element: 'select',
    col: { span: 3 },
    formItemProps: formItemProps,
  },
  {
    label: '关键字',
    key: 'option',
    element: 'input',
    col: { span: 4 },
    formItemProps: formItemProps,
  },
];

// 列表
const tabData = reactive([
  {
    a: '研发部门',
    b: '丁艳玲',
    b1: '备勤',
    b2: '2024-06-01',
    jbr: '2024-06-10',
    lrsj: '2024-06-01  15:00',
    ts: '10天',
    sy: '暂无',
    fj: '暂无附件',
  },
  {
    a: '研发部门',
    b: '马权',
    b1: '备勤',
    b2: '2024-06-01',
    jbr: '2024-06-10',
    lrsj: '2024-06-01  15:00',
    ts: '10天',
    sy: '暂无',
    fj: '暂无附件',
  },
]);
let columns: Array<TableColumnProps> = reactive([
  { dataIndex: 'index', title: '序号', width: 60 },
  { dataIndex: 'b2', title: '申请时间', width: 150 },
  { dataIndex: 'b1', title: '申请类型', width: 150 },
  { dataIndex: 'sy', title: '备注', minWidth: 150 },
  { dataIndex: 'kssj', title: '开始日期', width: 150 },
  { dataIndex: 'jssj', title: '结束日期', width: 150 },
  { dataIndex: 'a', title: '流程状态', width: 100 },
]);

// 编辑
let dialogTitle = ref<string>('新增考勤登记');
let showEdit = ref<boolean>(false);

// 导入
let showImp = ref<boolean>(false);
</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>
